Javascript “反应本机”复选框不工作
我不熟悉react-native并尝试在视图中添加复选框,但无法在react-native视图中获取复选框 提前谢谢Javascript “反应本机”复选框不工作,javascript,reactjs,react-native,Javascript,Reactjs,React Native,我不熟悉react-native并尝试在视图中添加复选框,但无法在react-native视图中获取复选框 提前谢谢 import React from 'react'; import {View, CheckBox } from 'react-native'; export default class SimpleCheckBox extends React.Component{ constructor(){ super(); } render(){ r
import React from 'react';
import {View, CheckBox } from 'react-native';
export default class SimpleCheckBox extends React.Component{
constructor(){
super();
}
render(){
return(
<View>
<CheckBox value={true} onValueChange={() => console.log("value might change")}/>
</View>
)
}
}
从“React”导入React;
从“react native”导入{View,CheckBox};
导出默认类SimpleCheckBox扩展React.Component{
构造函数(){
超级();
}
render(){
返回(
console.log(“值可能会更改”)}/>
)
}
}
复选框
仅添加到0.49版的React Native中,仅适用于Android。这意味着,如果您正在为iOS开发或无法升级应用程序版本,则需要使用自定义复选框组件
您可以在以下位置查看此新版本引入的所有更改:import React,{Component}从'React'开始
从“样式化组件”导入样式化
从“react native”导入{TouchableOpacity,View}
const CustomCheckBox=已设置样式(视图)`
高度:24px;
宽度:24px;
背景:${props=>(props.checkBoxActive?'#448ccb':'transparent');
边界半径:0px;
位置:相对位置;
证明内容:中心;
利润率:0px 8px 0;
边框:实心1px#e1e4e5;
`
const CheckIcon=已设置样式(视图)`
边界半径:0px;
自对准:居中;
变换:旋转(-30度);
`
/*==============================
自定义复选框样式
===============================*/
const CheckIconWrapper=styled(视图)`
位置:相对位置;
左:2px;
顶部:-2px;
`
const CheckIconVertical=styled(视图)`
高度:5px;
宽度:2倍;
背景:${props=>(props.checkBoxActive?'#fff':'transparent');
`
const CheckIconHorizontal=已设置样式(视图)`
高度:2倍;
宽度:16px;
背景:${props=>(props.checkBoxActive?'#fff':'transparent');
`
类复选框扩展组件{
状态={
复选框:false
}
render(){
返回(
{
this.setState({checkBox:!this.state.checkBox})
}}>
)
}
}
导出默认复选框
您当前使用的RN版本是什么?React Native 0.48
import React, { Component } from 'react'
import styled from 'styled-components'
import { TouchableOpacity, View } from 'react-native'
const CustomCheckBox = styled(View)`
height: 24px;
width: 24px;
background: ${props => (props.checkBoxActive ? '#448ccb' : 'transparent')};
border-radius: 0px;
position: relative;
justify-content: center;
margin: 0px 8px 0 0;
border: solid 1px #e1e4e5;
`
const CheckIcon = styled(View)`
border-radius: 0px;
align-self: center;
transform: rotate(-30deg);
`
/*==============================
Custom checkbox styled
===============================*/
const CheckIconWrapper = styled(View)`
position: relative;
left: 2px;
top: -2px;
`
const CheckIconVertical = styled(View)`
height: 5px;
width: 2px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
const CheckIconHorizontal = styled(View)`
height: 2px;
width: 16px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
class CheckBox extends Component {
state = {
checkBox: false
}
render() {
return (
<TouchableOpacity
onPress={() => {
this.setState({ checkBox: !this.state.checkBox })
}}>
<CustomCheckBox checkBoxActive={this.state.checkBox}>
<CheckIcon>
<CheckIconWrapper>
<CheckIconVertical checkBoxActive={this.state.checkBox} />
<CheckIconHorizontal checkBoxActive={this.state.checkBox} />
</CheckIconWrapper>
</CheckIcon>
</CustomCheckBox>
</TouchableOpacity>
)
}
}
export default CheckBox