如何在当前component中改变 Navigator的navigationBar的样式问题



  • 添加Navigation组件部分代码:
    export class Navigation extends Component {

    constructor(props) {
    super(props);
    }
    render() {
    return ( < Navigator initialRoute = {
    {
    title: this.props.title,
    component: this.props.component,
    index: 0
    }
    }
    configureScene = {
    () => {
    return Navigator.SceneConfigs.PushFromRight;
    }
    }
    renderScene = {
    (route, navigator) => {
    let Component = route.component;
    return (
    <View style={{flex:1, marginTop:64,marginBottom:49}}>
    <Component
    navigator={navigator}
    route={route} {...route.passProps}/>
    </View>
    );
    }
    }

      navigationBar = { < Navigator.NavigationBar routeMapper = {
          {
            LeftButton: (route, navigator, index) => {
              if (index === 0) {
                return null;
              } else {
                console.log('打印:' + index, route, navigator);
                return <Button style={styles.navBarLeftButton} 
                        title='Back' 
                        onPress={()=>{navigator.pop()}}/>;
              }
            },
            RightButton: (route, navigator, index) => {
              return <Button style={styles.navBarRightButton}
                      title='Done' 
                      color='red'
                      onPress={()=>{Alert.alert('Done')}}/>
            },
            Title: (route, navigator, index) => {
    
              return (
                <View style={styles.navBarText}>
                  <Text style={styles.navBarTitle}>{route.title}</Text>
                </View>
              );
            }
          }
        }
        style = {
          styles.navBar
        }
        />
      }
      />
    );
    

    }
    }

    const styles = StyleSheet.create({
    navBar: {
    backgroundColor: '#E0E0E0',
    height: 64
    },
    navBarText: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center'
    },
    navBarTitle: {
    textAlign: 'center',
    fontSize: 17
    },
    navBarRightButton: ({
    fontSize: 13
    }),
    navBarLeftButton: {
    marginLeft: 5
    }
    })

    index.js 部分代码:
    <Navigation
    title='活动商品列表'
    component={ActivityProductScreen}
    navigator={this.props.navigator} />

    想要在ActivityProductScreen中更改navigationBar 的样式,发现一直无法拿到对应的属性,求教是否是思考方式有误了?


登录后回复