Question

我刚刚开始研究React Native。需要帮助。

我想在TextInput旁边显示按钮。我要添加另一种这样的视图样式吗？

查看样式= {styles.flowRight}

 type Props = {};
    export default class SearchPage extends Component<{}> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.description}>Search for houses to buy!</Text>
            <TextInput style = {styles.searchInput}placeholder='Search via name or postcode'/>
            <Button style = {{alignSelf: 'flex-end'}}
            onPress={() => {}}
            color='#48BBEC'
            title='Done'/>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      description: {
        marginBottom: 20,
        fontSize: 18,
        textAlign: 'center',
        color: '#656565'
      },
      container: {
        padding: 30,
        marginTop: 65,
        alignItems: 'center'
      },
      searchInput: {
      height: 36,
      padding: 10,
      marginRight: 5,
      flexGrow: 1,
      fontSize: 18,
      borderWidth: 1,
      borderColor: '#48BBEC',
      borderRadius: 8,
      color: '#48BBEC',
      },
    });

Answer 1

您需要在视图中包装TextInput和Button并在其中添加样式属性flexDirection：“ row”。因此，Button将与TextInput相邻。这是代码示例

// NOTE: Of course change 3 to the appropriate user ID
   $u = new WP_User( 3 );

// Remove role
   $u->remove_role( 'subscriber' );

// Add role
   $u->add_role( 'editor' );

Answer 2

将text和textInput放在单独的View标记中。并使用flexDirection为该视图赋予样式：“行”

 <View style={styles.container}>
            <View style = {{ flexDirection: 'row'}}>
                <Text style={styles.description}>Search for houses to buy!</Text>
                <TextInput style = {styles.searchInput}placeholder='Search via name or postcode'/>
            </View>

            <Button style = {{alignSelf: 'flex-end'}}
            onPress={() => {}}
            color='#48BBEC'
            title='Done'/>
        </View>

彼此相邻的视图

2 个答案: