Question

我有用CSS和HTML编写的this标题，我试图将其设置为本机反应，但似乎position: 'absolute'会从场景中删除我的图标。

所以，在我的react-native应用程序中，我有以下标记：

<View
   style={header}>

      <TouchableWithoutFeedback
         onPress={this.props.callback}>

      <View>
        <Image
          style={headerIcon}
          source={require('./img/back.png')} />
      </View>
   </TouchableWithoutFeedback>

   <Text style={headerTitle}>{this.props.title.toUpperCase()}</Text>
</View>

以下样式表

const styles = StyleSheet.create({
    header: {
        height: 55,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: colors.white,
        flexDirection: 'row'
    },

    headerTitle: {
        color: colors.black,
        fontFamily: 'Dosis',
        fontSize: 15
    },

    headerIcon: {
        width: 22,
        height: 16
    }
})

有人可以解释一下如何让react-native标头的样式看起来像http://jsbin.com/bireqabujo/2/edit?html,css,output吗？

Answer 1

试试这个

<View style={styles.header}>

    <TouchableWithoutFeedback
        onPress={this.props.callback}>
        <View>
            <Image
                style={styles.headerIcon}
                source={require('./img/back.png')} />
        </View>
    </TouchableWithoutFeedback>

    <View style={styles.headerTitleWrapper}><Text style={styles.headerTitle}>MY TITLE</Text></View>
</View>

将你的风格改为

const styles = StyleSheet.create({

    header: {
        height: 55,
        alignItems: 'center',
        backgroundColor: "#fff",
        flexDirection: 'row'
    },

    headerTitleWrapper: {flex: 1,
        justifyContent: 'center', 
        alignItems: 'center'
    },

    headerTitle: {
        color: 'black',
        fontFamily: 'Dosis',
        fontSize: 15
    },

    headerIcon: {
        width: 22,
        height: 16
    }
})

点击

https://rnplay.org/apps/iSpc1Q

在React Native中

1 个答案: