react native 单选复选

最新推荐文章于 2024-08-24 07:39:48 发布

猴而

最新推荐文章于 2024-08-24 07:39:48 发布

阅读量1.1k

点赞数

分类专栏：前端 React Native

本文链接：https://blog.csdn.net/qq_34986333/article/details/63255261

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

React Native

4 篇文章 0 订阅

订阅专栏

this.state = {
//单选
isMan:true,
//多选secret
secret:false,
};

<View style={styles.nameGroupBox}>
<Text style={styles.nameGroup}>
性别:
</Text>
{
this.state.isMan ?
<FontAwesome name="check-square-o" size={20} color="#333" />
:
<TouchableOpacity onPress={() => this.setState({isMan:true})}>
<FontAwesome name="square-o" size={20} color="#333" />
</TouchableOpacity>
}
<Text style={{paddingLeft:5,marginRight:15}}>女</Text>
{
!this.state.isMan ?
<FontAwesome name="check-square-o" size={20} color="#333" />
:
<TouchableOpacity onPress={() => this.setState({isMan:false})}>
<FontAwesome name="square-o" size={20} color="#333" />
</TouchableOpacity>
}
<Text style={{paddingLeft:5}}>男</Text>

{/*多选*/}
{
this.state.secret ?
<TouchableOpacity onPress={() => this.setState({secret:false})}>
<FontAwesome name="check-square-o" size={20} color="#333" />
</TouchableOpacity>
:
<TouchableOpacity onPress={() => this.setState({secret:true})}>
<FontAwesome name="square-o" size={20} color="#333" />
</TouchableOpacity>
}
<Text style={{paddingLeft:5}}>保密</Text>
</View>