Javascript “反应本机样式”复选框和文本分隔

我正在尝试为应用程序创建一个注册页。我想为接受条款和条件设置一个复选框，但我不知道如何将该复选框稍微放在文本的左侧。目前，它被放在正文的第一个字母上

<View style={{flexDirection: 'row', alignItems: 'center'}>
     <CheckBox style =checked={this.state.agreeTNCs} onPress={() => this.setState({agreeTNCs: !this.state.agreeTNCs})} testID="tncsBox"/>
     <Hyperlink linkStyle={{color: '#2980b9'}} onPress={() => this.props.screenChangeHandler(routes.loggedOut.termsAndConditions)}>
         <Text>I agree to the Nowzi Terms and Conditions</Text>
     </Hyperlink>
</View>

this.setState（{agreeTNCs:！this.state.agreeTNCs}）testID=“tncsBox”/>
this.props.screenChangeHandler（routes.loggedOut.termsAndConditions）}>
我同意Nowzi条款和条件

尝试在两者之间添加一个不间断的空格：

<View style={{flexDirection: 'row', alignItems: 'center'}>
     <CheckBox style =checked={this.state.agreeTNCs} onPress={() => this.setState({agreeTNCs: !this.state.agreeTNCs})} testID="tncsBox"/>
     &nbsp;
     <Hyperlink linkStyle={{color: '#2980b9'}} onPress={() => this.props.screenChangeHandler(routes.loggedOut.termsAndConditions)}>
         <Text>I agree to the Nowzi Terms and Conditions</Text>
     </Hyperlink>
</View>

this.setState（{agreeTNCs:！this.state.agreeTNCs}）testID=“tncsBox”/>
this.props.screenChangeHandler（routes.loggedOut.termsAndConditions）}>
我同意Nowzi条款和条件

当我在Expo上运行应用程序时，应用程序的行为异常。然而，它给了我使用的想法，现在它工作了