更改按钮颜色onPress（切换功能）React Native [英] Change Button Color onPress (toggle functionality) React Native

查看：186
本文介绍了更改按钮颜色onPress（切换功能）React Native的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

希望一切顺利。



我似乎在使用基本按钮功能时遇到了困难。我需要的只是要更改的类的状态以及每次按下按钮时要更改的按钮样式。与TouchableHighlight不同，我需要将颜色更改保持到再次按下该按钮（恢复原始颜色）。



我尝试使用SwitchIOS但它没有似乎很容易被设计成一个圆形按钮，因此并没有真正解决。我是一个新手，所以仍然在学习，非常感谢你的帮助。以下是我到目前为止：

 'use strict'; 
 
 var React = require（'react-native'）; 
 var Dimensions = require（'Dimensions'）; 
 var window = Dimensions.get（'window'）; 
 var Icon = require（'react-native-vector-icons / FontAwesome'）; 
 var {
 AppRegistry，
样式表，
文字，
查看，
 NavigatorIOS，
图片，
 TouchableHighlight，
 TextInput，
} = React; 
 
 
类LS1扩展React.Component {
 
构造函数（道具）{
 super（道具）; 
 this.state = {
 paleo：false，
素食：假，
素食：假，
 nutfree：false，
 dairyfree：false，
 healthy：false，
 glutenfree：false，
} 
} 
 
 SkipLogin（）{
 var num = window.height / 8.335; 
 console.log（num）; 
} 
 
 render（）{
 return（
< View style = {styles.container}> 
< Image source = {require （'image！LS1'）} style = {styles.bgImage}> 
< Text style = {styles.icontext}>帮助我们了解您的饮食生活方式。< / Text> 
 
< View style = {styles.container}> 
< View style = {{flex：1，alignItems：'center'，flexDirection：'row'，justifyContent：'center'， marginTop：-20}}> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,0.9）'style = {styles.bubblechoice}> 
< Image style = {styles。 bubblechoice} source = {require（'image！vegan'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}> Vegan< /文字> 
< /查看> 
< /图片> 
< / TouchableHighlight> 
& LT; TouchableHighlight underlayColor ='rgba（73,182,77,1,0.6）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！paleo'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}> Paleo< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,0.6）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！nutfree'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}> Nut-Free< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,0.6）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！glutenfree'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}>无麸质< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< /查看> 
 
< View style = {{flex：1，alignItems：'center'，flexDirection：'row'，justifyContent：'center'，marginTop：-50}}> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,0.6）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！dairyfree'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}> Dairy-Free< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,0.6）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！vegetarian'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}>素食< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< TouchableHighlight underlayColor ='rgba（73,182,77,1,1）'style = {styles.bubblechoice}> 
< Image style = {styles.bubblechoice} source = {require（'image！healthy'）}> 
< View style = {styles.overlay}> 
< Text style = {styles.choicetext}> Healthy< / Text> 
< /查看> 
< / Image> 
< / TouchableHighlight> 
< /查看> 
< /查看> 
 
< Image source = {require（'image！nextbtn'）} style = {{resizeMode：'contains'，width：200，height：50，alignSelf：'center'，marginBottom：50 }} /> 
 
< TouchableHighlight onPress = {this.SkipLogin.bind（this）} underlayColor ='transparent'> 
< View style = {{backgroundColor：'transparent'，alignItems：'center'，marginBottom：8}}> 
<文字>跳过此步骤< / Text> 
< /查看> 
< / TouchableHighlight> 
 
< / Image> 
< /查看> 
）; 
} 
}; 
 
 var styles = StyleSheet.create（{
容器：{
 flex：1，
 justifyContent：'center'，
 alignItems：'center' ，
 backgroundColor：'transparent'
}，
 bgImage：{
 flex：1，
 width：window.width，
 resizeMode：'cover' ，
}，
 icontext：{
 color：'＃5d5d5d'，
 fontWeight：'400'，
 fontSize：20，
 backgroundColor：'透明'，
 paddingLeft：10，
 alignItems：'center'，
 marginTop：window.height / 2.2，
 textAlign：'center'，
 margin：10 ，
}，
 bubblechoice_click：{
 height：window.height / 8.335，
 borderRadius：（window.height / 8.3350）/ 2，
 marginRight：2， 
宽度：window.height / 8.335，
}，
 bubblechoice：{
 height：window.height / 8.335，
 borderRadius：（window.height / 8.3350） / 2，
 marginRight：2，
宽度：window.height / 8.335，
 }，
行：{
 flex：1，
 alignItems：'center'，
 flexDirection：'row'，
 justifyContent：'center'，
 marginTop：-30，
}，
 choicetext：{
 alignItems：'center'，
 alignSelf：'center'，
 color：'white'，
 marginTop：35，
 fontWeight：'600'，
 marginLeft：-18，
 fontSize：14，
 flex：1，
 textAlign：'center '
}，
 overlay：{
 backgroundColor：'rgba（80,94,104,0.7）'，
身高：100，
宽度：100，
 alignItems：'center'
}，
 
}）; 
 
 module.exports = LS1;

以下是产生的信息：





以下是按钮在被选中后的样子：



解决方案

我认为你应退后一步做一些基本的反应在深入研究React Native之前的教程 - 这是一个相当简单的问题要解决:)这里有一个解决方案：

 '用严格'; 
 
 var React = require（'react-native'）; 
 var Dimensions = require（'Dimensions'）; 
 var window = Dimensions.get（'window'）; 
 
 var {
 AppRegistry，
样式表，
文本，
查看，
 NavigatorIOS，
图像，
 TouchableHighlight，
 TextInput，
} = React; 
 
 class ToggleButton扩展React.Component {
 
 render（）{
 return（
< TouchableHighlight underlayColor ='rgba（73,182,77,1） ，0.9）'style = {styles.bubblechoice} onPress = {this.props.onPress}> 
< Image style = {styles.bubblechoice} source = {{uri：'https：//facebook.github .io / react / img / logo_og.png'}}> 
< View style = {[styles.overlay，this.props.selected？{backgroundColor：'rgba（80,94,104,0）'} ：{}]}> 
<文字样式= {styles.choicetext}> {this.props.label}< /文字> 
< / View> 
< / Image> 
< / TouchableHighlight> 
）; 
} 
} 
 
 
类LS1扩展React.Component {
 
构造函数（道具）{
 super（道具） ; 
 this.state = {
 paleo：false，
素食主义者：假，
素食：假，
} 
} 
 
 updateChoice（type）{
 let newState = {... this.state}; 
 newState [type] =！newState [type]; 
 this.setState（newState）; 
} 
 
 SkipLogin（）{
 var num = window.height / 8.335; 
 console.log（num）; 
} 
 
 render（）{
 return（
< View style = {styles.container}> 
< View style = {styles .bgImage}> 
< Text style = {styles.icontext}>帮助我们了解您的饮食生活方式。< / Text> 
 
< View style = {styles .container}> 
< View style = {{flex：1，alignItems：'center'，flexDirection：'row'，justifyContent：'center'，marginTop：-20}}> 
 < ToggleButton label ='Vegan'onPress = {（）=> {this.updateChoice（'vegan'）}} selected = {this.state.vegan} /> 
< ToggleButton label ='Paleo 'onPress = {（）=> {this.updateChoice（'paleo'）}} selected = {this.state.paleo} /> 
< ToggleButton label ='Vegetarian'onPress = {（）= > {this.updateChoice（'vegetarian'）}} selected = {this.state.vegetarian} /> 
< / View> 
< / View> 
 
< TouchableHighli ght onPress = {this.SkipLogin.bind（this）} underlayColor ='transparent'> 
< View style = {{backgroundColor：'transparent'，alignItems：'center'，marginBottom：8}}> 
<文字>跳过此步骤< / Text> 
< /查看> 
< / TouchableHighlight> 
 
< / View> 
< /查看> 
）; 
} 
}; 
 
 var styles = StyleSheet.create（{
容器：{
 flex：1，
 justifyContent：'center'，
 alignItems：'center' ，
 backgroundColor：'transparent'
}，
 bgImage：{
 flex：1，
 width：window.width，
 resizeMode：'cover' ，
}，
 icontext：{
 color：'＃5d5d5d'，
 fontWeight：'400'，
 fontSize：20，
 backgroundColor：'透明'，
 paddingLeft：10，
 alignItems：'center'，
 marginTop：window.height / 2.2，
 textAlign：'center'，
 margin：10 ，
}，
 bubblechoice_click：{
 height：window.height / 8.335，
 borderRadius：（window.height / 8.3350）/ 2，
 marginRight：2， 
宽度：window.height / 8.335，
}，
 bubblechoice：{
 height：window.height / 8.335，
 borderRadius：（window.height / 8.3350） / 2，
 marginRight：2，
宽度：window.height / 8.335，
 }，
行：{
 flex：1，
 alignItems：'center'，
 flexDirection：'row'，
 justifyContent：'center'，
 marginTop：-30，
}，
 choicetext：{
 alignItems：'center'，
 alignSelf：'center'，
 color：'white'，
 marginTop：35，
 fontWeight：'600'，
 marginLeft：-18，
 fontSize：14，
 flex：1，
 textAlign：'center '
}，
 overlay：{
 backgroundColor：'rgba（80,94,104,0.7）'，
身高：100，
宽度：100，
 alignItems：'center'
}，
 
}）; 
 
 module.exports = LS1; 
 
 AppRegistry.registerComponent（'main'，（）=> LS1）;

您可以通过从http://exponentjs.com/ （app store或beta，无论你喜欢哪个）然后加载exp：//exp.host/@brentvatne/button-color-exp


hope all is well.

I seem to be having difficulty with a basic button functionality. All I need is the state of the class to change and the button style to change every-time the button is pressed. Unlike TouchableHighlight, I need to color change to stay until the button is pressed again (to go back to the original color).

I have tried to use SwitchIOS but it doesn't seem to be easily styled into a circular button, and therefore doesn't really work out. I am a novice so still learning and would greatly appreciate your help. Here is what I have so far:

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  Image, 
  TouchableHighlight,
  TextInput,
} = React;


class LS1 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      paleo: false, 
      vegan: false, 
      vegetarian: false, 
      nutfree: false, 
      dairyfree: false, 
      healthy: false,
      glutenfree: false,
    }
  }

  SkipLogin() {
    var num = window.height/8.335;
    console.log(num);
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={require('image!LS1')} style={styles.bgImage}>
          <Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>

          <View style={styles.container}>
            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}>
                  <Image style={styles.bubblechoice} source={require('image!vegan')}>
                    <View style={styles.overlay}>
                      <Text style={styles.choicetext}>Vegan</Text>
                    </View>
                  </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!paleo')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Paleo</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!nutfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Nut-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!glutenfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Gluten-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
            </View>

            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!dairyfree')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Dairy-Free</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!vegetarian')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Vegetarian</Text>
                  </View>
                </Image>
              </TouchableHighlight>
              <TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} >
                <Image style={styles.bubblechoice} source={require('image!healthy')}>
                  <View style={styles.overlay}>
                    <Text style={styles.choicetext}>Healthy</Text>
                  </View>
                </Image>
              </TouchableHighlight>
            </View>
          </View>

          <Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/>

          <TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
            <View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
              <Text>skip this step</Text>
            </View>
          </TouchableHighlight>

        </Image>
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  bgImage: {
    flex: 1,
    width: window.width,
    resizeMode: 'cover',
  },
  icontext: {
    color: '#5d5d5d',
    fontWeight: '400',
    fontSize: 20,
    backgroundColor: 'transparent',
    paddingLeft: 10,
    alignItems: 'center',
    marginTop: window.height/2.2,
    textAlign: 'center',
    margin: 10,
  },
  bubblechoice_click: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  bubblechoice: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  row: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: -30,
  },
  choicetext: {
    alignItems: 'center',
    alignSelf: 'center',
    color: 'white',
    marginTop: 35,
    fontWeight: '600',
    marginLeft: -18,
    fontSize: 14,
    flex: 1,
    textAlign: 'center'
  },
  overlay: {
    backgroundColor:'rgba(80,94,104,0.7)',
    height: 100,
    width: 100,
    alignItems:'center'
  },

});

module.exports = LS1;

And here is a visual of what that produces:

Here's what the button should look like after being selected:

解决方案

I think you should take a step back and do some basic React tutorials before digging too much into React Native - this is a fairly straightforward problem to solve :) Here's a solution for you:

'use strict';

var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  Image,
  TouchableHighlight,
  TextInput,
} = React;

class ToggleButton extends React.Component {

  render() {
    return (
      <TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice} onPress={this.props.onPress}>
          <Image style={styles.bubblechoice} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}>
            <View style={[styles.overlay, this.props.selected ? {backgroundColor: 'rgba(80,94,104,0)'} : {}]}>
              <Text style={styles.choicetext}>{this.props.label}</Text>
            </View>
          </Image>
      </TouchableHighlight>
    );
  }
}


class LS1 extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      paleo: false,
      vegan: false,
      vegetarian: false,
    }
  }

  updateChoice(type) {
    let newState = {...this.state};
    newState[type] = !newState[type];
    this.setState(newState);
  }

  SkipLogin() {
    var num = window.height/8.335;
    console.log(num);
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.bgImage}>
          <Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>

          <View style={styles.container}>
            <View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
              <ToggleButton label='Vegan' onPress={() => { this.updateChoice('vegan') }} selected={this.state.vegan} />
              <ToggleButton label='Paleo' onPress={() => { this.updateChoice('paleo') }} selected={this.state.paleo} />
              <ToggleButton label='Vegetarian' onPress={() => { this.updateChoice('vegetarian') }} selected={this.state.vegetarian} />
            </View>
          </View>

          <TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
            <View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
              <Text>skip this step</Text>
            </View>
          </TouchableHighlight>

        </View>
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent'
  },
  bgImage: {
    flex: 1,
    width: window.width,
    resizeMode: 'cover',
  },
  icontext: {
    color: '#5d5d5d',
    fontWeight: '400',
    fontSize: 20,
    backgroundColor: 'transparent',
    paddingLeft: 10,
    alignItems: 'center',
    marginTop: window.height/2.2,
    textAlign: 'center',
    margin: 10,
  },
  bubblechoice_click: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  bubblechoice: {
    height: window.height/8.335,
    borderRadius: (window.height/8.3350)/2,
    marginRight: 2,
    width: window.height/8.335,
  },
  row: {
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: -30,
  },
  choicetext: {
    alignItems: 'center',
    alignSelf: 'center',
    color: 'white',
    marginTop: 35,
    fontWeight: '600',
    marginLeft: -18,
    fontSize: 14,
    flex: 1,
    textAlign: 'center'
  },
  overlay: {
    backgroundColor:'rgba(80,94,104,0.7)',
    height: 100,
    width: 100,
    alignItems:'center'
  },

});

module.exports = LS1;

AppRegistry.registerComponent('main', () => LS1);

You can try it out by downloading Exponent to your phone from http://exponentjs.com/ (app store or beta, whichever you prefer) then loading up exp://exp.host/@brentvatne/button-color-exp

这篇关于更改按钮颜色onPress（切换功能）React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆